<template>
  <footer>
    <ul>
      <li> 
        <router-link to="/" active-class="active" exact>
          <span class="iconfont icon-shouye-shouye"></span>
          <p>首页</p>
        </router-link>
      </li>
      <li>
        <router-link to="/Faxian" active-class="active" exact>
          <span class="iconfont icon-faxian"></span>
          <p>发现</p>
        </router-link>
      </li>
      <li>
        <router-link to="/Position" active-class="active" exact>
          <span class="iconfont icon-xinxi"></span>
          <p>职位</p>
        </router-link>
      </li>
      <li>
        <router-link to="/Message" active-class="active" exact>
          <span class="iconfont">&#xe615;</span>
          <p>消息</p>
        </router-link>
      </li>
      <li>
        <router-link to="/Me" active-class="active" exact>
          <span class="iconfont icon-wode"></span>
          <p>我的</p>
        </router-link>
      </li>
    </ul>


  </footer>
</template>

<script>
export default {
  name: "Footer",
};
</script>


<style scoped>
/* 而你的footer里面没有导入东西，所以这里如果想用的话，他的结果会是search（不信给你演示一下） */
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  margin-top: 0.1rem;
}

footer ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

footer ul li a {
  display: block;
  /* height: 1.1rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.1rem 0;
}
footer ul li a .iconfont {
  font-size: 0.3rem;
}
/* footer li img {
  width: 0.4rem;
  height: 0.3rem;
} */
</style>